<template>
  <div id="ext_infos">
    <!-- 工具面板组件--扩展功能（批量处理） -->
    <div class = "panelTitle"  @click="extShowToggle" v-show="bIsDisplayExt"><span>扩展功能</span></div>
    <div class = "panelBody" v-show="bIsDisplayExt">
        <!-- <label class="labStyle" for="plotpop">扩展功能:</label>
        <input type="text" name="bunit" id="baseunit" class ="w36"/> -->
        <div>
          <label class = "font12"><input class = "font12" name="plotmould" type="checkbox" value="" />使用当前军标尺寸</label>
          <button type="button" class="cloneBtn" id="cloneBtn" @click="plotClone()">复制军标</button>
        </div>
        <div>
          <!-- <button type="button" class="cloneBtn" id="cloneBtn" @click="plotClone()">复制军标</button>         -->
          <!-- <label class = "font12 marginLeft8">数据导入:</label> -->
          <input type="file" class="fileBtn marginLeft8" id="plotdfile" name="plotdfile" accept="text/plain" @change="loadPlotDataFile" /> <!-- accept="image/png, image/jpeg 根据数据导入军标-->
          <button type="button" class="cloneBtn" id="plotDataImpBtn" @click="plotDataImp()">导入军标</button>
        </div>
        <!-- 清除当前军标旋转 清除当前类型军标旋转 -->
        <hr>
        <div>
          <button type="button" class="cloneBtn marginLeft8" id="plotRotateClsBtn" @click="plotRotateCls()">清除旋转</button>
          <button type="button" class="fileBtn" id="plotRotateClsAllBtn" @click="plotRotateClsAll()">清除所有文字旋转</button>
        </div>
        <!-- 偏移军标 批量偏移军标 -->
        <hr>
        <div>
          <label class = "font12 marginLeft8">偏移X:<input type="text" name="offsetX" id="offsetX"  class ="w40"/></label>
          <label class = "font12 marginLeft8">偏移y:<input type="text" name="offsetY" id="offsetY"  class ="w40"/></label>
          <button type="button" class="cloneBtn" id="offsetBtn" @click="offsetBtn()">移动军标</button>
          <button type="button" class="cloneBtn" id="offsetAllBtn" @click="offsetAll()">批量移动</button>
        </div>
        <!-- <textarea name="poptxt" id="plotpop"></textarea> -->
        <!-- <button type="button" class="popBtn" id="popCancelBtn" @click="popCancel()">取 消</button>&nbsp;
        <button type="button" class="popBtn" id="popOKBtn" @click="popOK()">确 定</button>
        <button type="button" class="popBtn" id="popOKBtn" @click="test('icon_1599552604424')">测 试</button>-->
    </div>
  </div>
</template>test

<script>
// import Heatmap from './heatmap.js'

export default {
  // mixins: [Heatmap, Heatgrid], // mapStyle, mapFlash
  data () {
    return {
      // oMap: null, // 地图对象
      // sSRS: 'EPSG:4326', // 空间参照系（Spatial Reference System)
      bIsDisplayExt: false,
      sDataFile: null
    }
  },
  watch: {
    // watch
  },
  mounted () {
    // mounted
  },
  methods: {
    test (id) {
      this.updatePlotPop(id, this.$parent.xData)
      // 更新写入数据库
      const plotElement = this.getPlotFromXData(id)
      plotElement.TS = new Date().getTime()
      this.plotRecordUpdate(plotElement, 'U')
    },
    /**
     * @description 显示隐藏body面板内容
     * @param null
     * @return null
     */
    extShowToggle () {
      console.log(this.bIsDisplayExt)
      this.bIsDisplayExt = !this.bIsDisplayExt
      // if (this.bIsDisplayExt) { // 展开提示主体
      //   const plotIDElement = document.getElementById('plotid')
      //   if (plotIDElement) {
      //     let sPlotID = plotIDElement.value
      //     if (!sPlotID) return // 没有选择的军标id，退出
      //     if (sPlotID.substr(0,4) === 'alt_') {
      //       sPlotID = sPlotID.substr(4)
      //     }
      //     const oPlotData = this.$parent.getPlotFromXData(sPlotID)
      //     // 显示军标的名称（类型的确认，等）
      //     if (oPlotData && oPlotData.name) {
      //       console.log(oPlotData.name)
      //       // this.setPopInfos(oPlotData.pop)
      //     }
      //   }
      // }
    },
    /**
     * @description 获取导入数据的文件及路径
     * @param null
     * @return null
     */
    loadPlotDataFile () {
      const inputFile = document.getElementById('plotdfile')
      const plotdfile = inputFile.files
      console.log(plotdfile.length, inputFile.value)
      if (plotdfile.length > 0) {
        this.sDataFile = inputFile.value
        const reader = new FileReader()
        console.log(reader)
        // reader.readAsText(plotdfile[0]) // 读取文件file
        reader.readAsText(plotdfile[0], 'utf8')
        // reader.οnlοad=function (f) {
        reader.onload = () => {
          // console.log(reader.result)
          // 回车换行切数组
          const aPlotData = reader.result.split(/[(\r\n)\r\n]+/) // snsArr=str.split(/[(\r\n)\r\n]+/);
          aPlotData.forEach((item, index) => {
            if (item) {
              // snsArr.splice(index,1);//删除空项
              // console.log(index, item)
              // 按照tab进行切分数组
              const aPlotPart = item.split(/\t/g)
              console.log(aPlotPart)
              // 添加军标async data2plot (sPlotID, sPlotType, aPnts, aUnit, sTxt = null, oPop = null)
              // this.$parent.data2plot (null, 'icon_lu', [[116.2, 39.9]], [1000, 1000], '测试', { name: 'test' })
              const nPart = aPlotPart.length
              if (nPart > 7) { // 有 提示数据
                let strPop = '{'
                for (let idx = 7; idx < nPart; idx++) {
                  strPop = strPop + '"' + aPlotPart[idx] + '":"' // 添加key
                  if (idx + 1 > nPart) { // 添加val
                    strPop = strPop + '",'
                    break
                  } else {
                    idx++
                    strPop = strPop + aPlotPart[idx] + '",'
                  }
                }
                strPop = strPop.substr(0, strPop.length - 1)
                strPop = strPop + '}'
                // console.log(strPop, typeof strPop)
                this.$parent.data2plot(null, aPlotPart[1], [[aPlotPart[2], aPlotPart[3]]], [aPlotPart[4], aPlotPart[5]], '', strPop)
              } else { // 无提示参数
                this.$parent.data2plot(null, aPlotPart[1], [[aPlotPart[2], aPlotPart[3]]], [aPlotPart[4], aPlotPart[5]], '', '')
              }
              // this.$parent.data2plot (null, aPlotPart[1], [[aPlotPart[2], aPlotPart[3]]], [aPlotPart[4], aPlotPart[5]], '', '')
            }
          })
        }
      } else {
        this.sDataFile = null
      }
      console.log(this.sDataFile)
    },
    /**
     * @description 数据导入-生成军标
     * @param null
     * @return null
     */
    plotDataImp () {
      // 文件名有效时，导入军标
      if (this.sDataFile) {
        this.sDataFile = inputFile.value
        // 数据处理完成后清空文件及目录
        this.sDataFile = null // 清空文件
      }
    }

    // 当前方法
  }
}
</script>

<style scoped lang="scss">
.panelTitle {
	text-align: center;
	span {
		font-family: "Microsoft Yahei";
		font-size: 12px;
	}
}
.panelBody {
	width: 99.5%;
	margin-left: 0.5px;
	background-color: #ccc;
	border-right: 1px sold #f00;
}
.labStyle {
	font-family: "Microsoft Yahei";
	font-size: 10px;
	margin: 5px 12px;
}
.font12 {
	font-size: 12px;
	margin: 4px;
}
#plotpop {
	width: 200px;
	height: 100px;
	color: #999;
	font-family: "Microsoft Yahei";
	font-size: 12px;
	margin: 0 6px;
}
.cloneBtn {
	width: 64px;
	font-family: "Microsoft Yahei";
	font-size: 10px;
	margin: 4px;
}
.fileBtn {
	width: 132px;
	font-family: "Microsoft Yahei";
	font-size: 10px;
	margin: 4px 0;
}
.marginLeft8 {
	margin-left: 8px;
}
.w40 {
	width: 40px;
}

</style>
